<template>
  <div v-show="!loading">
    <n-space >
<!--      <n-grid cols="4 s:5 m:9 l:10 xl:11 2xl:12" responsive="screen">-->
        <n-gi v-for="item in imgTypes" :key="item.id">
          <n-card @click="getImgs(page, pageSize, item.id)">
            <div v-if="checkId === item.id" >{{item.name}}</div>
            <n-gradient-text v-else :gradient="{from: 'rgb(85, 85, 85)',to: 'rgb(170, 170, 170)'}">{{item.name}}</n-gradient-text>
          </n-card>
        </n-gi>
<!--      </n-grid>-->
    </n-space>
    <n-divider>
    </n-divider>
    <n-grid cols="24" item-responsive responsive="screen">
      <n-grid-item span="22 s:22 m:22 l:20 xl:20 2xl:20" offset="1 s:1 m:1 l:2 xl:2 2xl:2">
        <n-image-group show-toolbar-tooltip :theme-overrides="imageGroupThemeOverrides">
          <n-grid id="n-grid" cols="1 s:2 m:3 l:3 xl:4 2xl:5" :x-gap="12" :y-gap="8" responsive="screen">
            <n-grid-item v-for="(item, index) in list" :key="item.id">
              <div class="item-img" >
                <n-skeleton v-if="loading" size="large"/>
                <n-image @contextmenu="handleImageMenu(index, $event)" class="item-img-card" :id="'img--' + item.id" :height="elHeight" :width="elWidth" :src="item.thumb" :preview-src="item.url" @load="loadImg(item.id)"/>
              </div>
            </n-grid-item>
          </n-grid>
        </n-image-group>
        <n-divider>
          <n-pagination v-model:page="page" :page-count="pageCount"/>
        </n-divider>
      </n-grid-item>
    </n-grid>
  </div>
  <div v-show="loading" style="height: 100vh;position:relative">
    <div style="position: absolute;top:50%;left: 50%;transform: translate(-50%)">
      <n-spin stroke="red" size="large"/>
    </div>
  </div>
  <n-dropdown
    placement="bottom-start"
    trigger="manual"
    :x="showImageMenuDropdownPosition.x"
    :y="showImageMenuDropdownPosition.y"
    :options="optionImageMenuDropdown"
    :show="showImageMenuDropdown"
    :on-clickoutside="onClickoutside"
    @select="handleSelect"
  />
</template>

<script lang="ts" src="./script.ts"></script>

<style scoped>@import './style.css';</style>
